<template>
  <a-typography>
    <a-typography-title level="3">上传批次</a-typography-title>
  </a-typography>
  <a-form style="margin-top: 30px">
    <a-form-item
        label="实验批次名称"
        name="batchName"
        class="inputStyle">
      <a-input v-model:value="experimentSetForm.batchName" />
    </a-form-item>
    <a-form-item
        label="描述"
        name="Description"
        class="inputStyle">
      <a-textarea  v-model:value="experimentSetForm.description" rows="4"></a-textarea>
    </a-form-item>
    <a-space direction="horizontal" size="large">
      <a-button type="primary" @click="handleUpload" :loading="loading">确定</a-button>
      <a-button type="primary" danger @click="handleCancel">取消</a-button>
    </a-space>
  </a-form>
</template>
<script>
import axiosInstance from "@/axios/axios.js";
import { message } from 'ant-design-vue';

export default {
  name: "UploadBatch",
  data() {
    return {
      loading: false,
      experimentSetForm: {
        batchName: "",
        description: ""
      }
    };
  },
  methods: {
    async handleUpload(){
      if (!this.experimentSetForm.batchName) {
        message.error('请输入批次名称');
        return;
      }

      if (!this.$route.query.experiment_set_id || !this.$route.query.experiment_set_name) {
        message.error('缺少实验数据集信息');
        return;
      }

      this.loading = true;
      try {
        const response = await axiosInstance({
          method: "POST",
          url: "/upload/batch",
          headers: {
            Authorization: `Bearer ${this.$cookies.get("jwt")}`
          },
          data: {
            username: this.$cookies.get("username"),
            description: this.experimentSetForm.description,
            batchName: this.experimentSetForm.batchName,
            experimentSetId: this.$route.query.experiment_set_id,
            experimentSetName: this.$route.query.experiment_set_name,
          },
        });

        if (response.data.code === 200) {
          message.success('创建批次成功');
          this.$router.go(-1);
        } else {
          message.error(response.data.message || '创建批次失败');
        }
      } catch (err) {
        console.error('创建批次失败:', err);
        message.error(err.response?.data?.message || '创建批次失败');
      } finally {
        this.loading = false;
      }
    },
    handleCancel(){
      this.$router.go(-1);
    }
  },
  created() {
    if (!this.$route.query.experiment_set_id || !this.$route.query.experiment_set_name) {
      message.error('缺少必要参数');
      this.$router.go(-1);
      return;
    }
    console.log("上传批次界面，上层实验数据集名称为:", this.$route.query.experiment_set_name);
  }
}
</script>

<style scoped>
.inputStyle{
  padding: 0 32vw 0 32vw;
}
</style>